import Taro, { Component } from '@tarojs/taro'
import { View, Text, ScrollView, Button } from '@tarojs/components'
import ForceGraph3D from '3d-force-graph';
import cat from '../../assets/imgs/cat.jpg'
import dog from '../../assets/imgs/dog.jpg'
import eagle from '../../assets/imgs/eagle.jpg'
import elephant from '../../assets/imgs/elephant.jpg'
import octopus from '../../assets/imgs/octopus.jpg'
import * as THREE from '../../../node_modules/three/build/three.module.js';
import axios from 'axios';
import './index.scss'


class Index extends Component {
    config = {
        navigationBarTitleText: '测试'
    }
    constructor(props) {
        super(props);
        this.fileInputEl = Taro.createRef();
        this.imgArr = [cat, dog, eagle, elephant, octopus]
    }

    state = {
        showOperate: true, //展示操作图册的按钮
    }


    componentDidShow() {
      this.drawForce()
    }

    drawForce = () => {
        const that = this;
        const rootId = 0;
    // Random connected graph
        const gData = {
        nodes: this.imgArr.map((img, id) => ({ id, img, collapsed: id !== rootId, childLinks: [] })),
        links: [...Array(this.imgArr.length).keys()]
            .filter(id => id)
            .map(id => ({
                source: id,
                target: Math.round(Math.random() * (id-1))
            }))
        };

       
        var dom = document.querySelector('.force-wrap')
        var myGraph = ForceGraph3D()
        (dom)
        .height([600])
        .linkColor(()=> 'white')
        .linkOpacity([0.2])
        .graphData(gData)
        .onBackgroundClick(node=> {
            console.log('1111')
        })
        .nodeThreeObject(({ img }) => {
            // use a sphere as a drag handle
            // console.log(img)
            const obj = new THREE.Mesh(
              new THREE.SphereGeometry(7),
              new THREE.MeshBasicMaterial({ depthWrite: false, transparent: true, opacity: 0 })
            );
    
            // add img sprite as child
            const imgTexture = new THREE.TextureLoader().load(img);
            // console.log(imgTexture)
            const material = new THREE.SpriteMaterial({ map: imgTexture });
            const sprite = new THREE.Sprite(material);
            sprite.scale.set(12, 12);
            obj.add(sprite);
            
            return obj;
          })
          .onNodeClick(node=> {
            // console.log(node)
          })
          .onNodeDragEnd(node => {
            console.log(node)
            const distance = 35;
            const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
            that.setState({
                showOperate: true
            })
            myGraph.cameraPosition(
              { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
              node, // lookAt ({ x, y, z })
              2000  // ms transition duration
            );
        })
       
        
    }

    //上传图片方法
    uploadFile = (e) => {
        
        let newfile = e.target.files[0]

        const formData = new FormData();
        formData.append('file', newfile, newfile.name )
        const config ={
            headers:{
              'Content-Type':'application/x-www-form-urlencoded'
            }
        }
        Taro.showLoading({
            title: '上传中'
        })

        // if (files.length === 0) return;
        axios.post('/api/saveFile', formData, config).then((res)=> {
            console.log(res, "：图片上传成功后返回")
            if(res.data.status===200) {
                Taro.hideLoading()
            }
        })
    }

    render() {
        let {clickStatus} = this.state;
   
        return (
            <View className='photo-album-wrap'>
                <View className='force-wrap'>
                </View>
                <View className="btn-wrap">
                    {/* <View className="uploadFile-wrap">
                        <input ref={this.fileInputEl} onChange={(e)=> {this.uploadFile(e)}} hidden className="file" type="file" multiple accept="image/*" />
                        <Button type="primary" className="btn-style" onClick={()=> {
                            this.fileInputEl.current.click()
                        }} >上传图片</Button>
                    </View> */}
                    <Button type="primary">新增相册</Button>
                </View>
            </View>
        )
    }


}


export default Index;